<template>
  <div class="department">
    <pageSearch
      :searchConfig="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    />
    <pageContent
      ref="contentRef"
      :contentConfig="contentConfig"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    >
      <!-- 插槽的内容 -->
      <template #leader="scope">
        <span class="leader">哈哈哈: {{ scope.row[scope.prop] }}</span>
      </template>
      <template #parent="scope">
        <span class="parent">呵呵呵: {{ scope.row[scope.prop] }}</span>
      </template>
    </pageContent>
    <pageModal :modal-config="modalConfigRef" ref="modalRef"></pageModal>
  </div>
</template>

<script setup lang="ts" name="department">
import { ref } from 'vue'
import pageSearch from '@/components/page-search/page-search.vue'
import pageContent from '@/components/page-content/page-content.vue'
import pageModal from '@/components/page-modal/page-modal.vue'

// 引入配置文件
import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import { computed } from 'vue'
import useMainStore from '@/store/main/main'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'

// 为了 modal 组件的通用性，不能直接在该组件中从store拿数据，应该在传入数据之前，拿到对应遍历部门的数据
const modalConfigRef = computed(() => {
  const mainStore = useMainStore()
  // console.log(mainStore.entireDepartments)
  // 由于在 配置文件 中只需要用这两个值 所以使用map映射返回一个新的对象
  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id }
  })
  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options.push(...departments)
    }
  })
  return modalConfig
})

// setup 中相同的逻辑进行抽取：hooks
// 查询操作, content 的操作
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()

// 点击 content，Modal的操作
const { modalRef, handleNewClick, handleEditClick } = usePageModal()
</script>

<style scoped>
.department {
}
</style>
